<template>
	<view class="threeCard">
		<view class="threeCard-left"  @click="jump('/pages/activity/activestwo')">
			<image :src="$BASE_URL + threeCard[0]" mode="aspectFill"></image>
		</view>
		<view class="threeCard-right" >
			<view class="right-top" @click="jump('/pages/activity/activesone')">
				<image :src="$BASE_URL + threeCard[1]" mode="aspectFill"></image>
			</view>
			<view class="right-bottom"  @click="jump('/pages/activity/activesthree')">
				<image :src="$BASE_URL + threeCard[2]" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			threeCard: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				switch: false
			}
		},
		mounted() {

		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.threeCard {
		width: 720rpx;
		height: 420rpx;
		// background-color: aquamarine;
		margin: 0 auto;
		margin-bottom: 20rpx;

		display: flex;
		justify-content: space-between;

		.threeCard-left {
			width: 328rpx;
			height: 100%;
			// background-color: black;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.threeCard-right {
			width: 372rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;


			.right-top,
			.right-bottom {

				image {
					width: 100%;
					height: 100%;
				}

				overflow: hidden;
				width: 100%;
				height: 200rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
